<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>连锁干洗中心业务管理系统</title>
    <%- include('css') %>
</head>

<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <%- include('header') %>
        <%- include('menu') %>


        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div>
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>顾客管理</legend>
                </fieldset>

                <form name="form1" class="layui-form" action="">

                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">搜索</label>
                            <div class="layui-input-inline" style="width: 250px;">
                                <input type="text" id="search" name="search" placeholder="登录账号/联系手机" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">禁用</label>
                            <div class="layui-input-inline">
                                <select name="forbidden" id="forbidden" lay-filter="forbidden">
                                    <option value="">全部</option>
                                    <option value="1">禁用中</option>
                                    <option value="0">启用中</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <table class="layui-hide" id="tablediv" lay-filter="tablediv"></table>
                </form>

                <script type="text/html" id="toolbar">
                    <div class="layui-btn-container">

                        <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="" lay-filter="search">查询数据</button>
                        <!--<button type="button" class="layui-btn layui-btn-sm" lay-event="tonew">新增</button>-->
                    </div>
                </script>

                <script type="text/html" id="opdiv">
                    <!--<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->
                    <a class="layui-btn layui-btn-xs" lay-event="reset">重置密码</a>
                    <a class="layui-btn layui-btn-xs" lay-event="view">查看</a>
                    <!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
                </script>

                <script type="text/html" id="checkboxTpl">
                    <input type="checkbox" name="lock" value="{{d.id}}" title="锁定" lay-filter="lockDemo" {{ d.forbidden == '1' ? 'checked' : '' }}>
                </script>


            </div>
        </div>


        <%- include('footer') %>
    </div>
    <%- include('script') %>

    <script>
        var table;
        var form;
        var vm = new Vue({
            el: '#app',
            data:function() {
                return {
                }
            },
            mounted: function () {
                var self = this;
                layui.use(['element', "table", 'form', 'laytpl'], function () {

                    var laytpl = layui.laytpl,
                        element = layui.element;
                    table = layui.table
                    form = layui.form;

                    table.render({
                        elem: "#tablediv",
                        url: "/admin/customer",
                        toolbar: '#toolbar',
                        cols: [
                            [
                                {
                                    field: "username",

                                    title: "登录账号"
                                },
                                {
                                    field: "phone",

                                    title: "联系手机"
                                },
                                {
                                    field: "money",
                                    title: "账户余额"
                                },
                                {
                                    field: "forbidden",
                                    width: 120,
                                    title: "禁用",
                                    sort: true,
                                    templet:'#checkboxTpl'
                                },
                                {
                                    fixed: 'right',
                                    title: '操作',
                                    toolbar: '#opdiv',
                                    width: 300
                                }
                            ]
                        ],
                        page: true,
                    });

                    //监听锁定操作
                    form.on('checkbox(lockDemo)', function(obj){
                        let forbidden;
                        let msg;
                        if(obj.elem.checked){
                            forbidden = '1';
                            msg = '禁用成功'
                        }else{
                            forbidden = '0';
                            msg = '启用成功'
                        }
                        $.ajax({
                            url:'/admin/customer/'+obj.value+'/edit',
                            type:'GET',
                            data:{
                                forbidden:forbidden
                            },
                            success:(res)=>{
                                if(res.code === 200){
                                    layer.msg(msg,{icon:1})
                                }else{
                                    layer.msg('失败：'+res.error+' -- '+res.code,{icon:2});
                                }
                            }
                        });
                    });

                    table.on('toolbar(tablediv)', function (obj) {
                        if (obj.event === 'tonew') {
                            layer.open({
                                type: 2,
                                title: false,
                                area: ['1000px', '500px'],
                                anim: 2,
                                content: ['/admin/customer/tonew'], //iframe的url，no代表不显示滚动条
                                end: function () { //
                                }
                            });
                        }
                    })

                    table.on('tool(tablediv)', function (obj) {
                        var data = obj.data;
                        if (obj.event === 'del') {
                            layer.confirm('真的删除行么', function (index) {
                                $.ajax({
                                url:'/admin/customer/'+data.id,
                                type:'Delete',
                                data:{},
                                success:(res)=>{
                                    if(res.code === 200){
                                        layer.close(index);
                                        layer.msg('删除成功！',{icon:1});
                                        table.reload('tablediv',{
                                            where:{}
                                        });
                                    }else{
                                        layer.msg('删除失败：'+res.error+' -- '+res.code,{icon:2});
                                    }
                                }
                                });
                            });
                        } else if (obj.event === 'edit') {
                            layer.open({
                                type: 2,
                                title: false,
                                area: ['1000px', '600px'],
                                anim: 2,
                                offset: '20px',
                                content: ['/admin/customer/toedit?id=' + data.id], //iframe的url，no代表不显示滚动条
                                end: function () { //此处用于演示
                                }
                            });
                        } else if (obj.event === 'view') {
                            layer.open({
                                type: 2,
                                title: false,
                                area: ['1000px', '600px'],
                                anim: 2,
                                offset: '20px',
                                content: ['/admin/customer/todetail?id=' + data.id], //iframe的url，no代表不显示滚动条
                                end: function () { //此处用于演示
                                }
                            });
                        } else if (obj.event === 'reset') {
                            layer.confirm('确定重置此账号密码么', function (index) {
                                $.ajax({
                                    url:'/admin/customer/'+data.id+'/edit',
                                    type:'GET',
                                    data:{
                                        password:'123456'
                                    },
                                    success:(res)=>{
                                        if(res.code === 200){
                                            layer.close(index);
                                            layer.msg('密码已重置！新密码：123456',{icon:1})
                                        }else{
                                            layer.msg('重置失败：'+res.error+' -- '+res.code,{icon:2});
                                        }
                                    }
                                });
                            });
                        }
                    });
                    //查询按钮
                    form.on('submit(search)', function (data) {
                        table.reload('tablediv', {
                            where: { //设定异步数据接口的额外参数，任意设
                                search: data.field.search,
                                forbidden:data.field.forbidden
                                //…
                            },
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                        return false;
                    });
                    //查询按钮
                    form.on('select(forbidden)', function (data) {
                        var search = $("#search").val();
                        table.reload('tablediv', {
                            where: { //设定异步数据接口的额外参数，任意设
                                forbidden:data.value,
                                search:search
                                //…
                            },
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                        return false;
                    });
                })
            },
            methods: {
                iframeclose: function () {
                },
                iframesave: function () {
                    table.reload('tablediv', {
                        where: { //设定异步数据接口的额外参数，任意设
                        },
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                },
                iframeupdate: function () {
                    table.reload('tablediv', {
                    });
                },
            }
        })
    </script>
</body>

</html>
